<template>
    <div class="background-image">
        <div class="content">
            <div class="main">
                <div class="left"></div>
                <div class="right">
                    <div class="img">
                        <img src="../../assets/NJUST.jpeg" />
                    </div>
                    <div class="choose">
                        <ul>
                            <li class="li1"><router-link to="/login"><span>支持人员</span></router-link></li>
                            <li class="li2"><router-link to="/login2"><span>检测人员</span></router-link></li>
                        </ul>
                    </div>
                    <div class="con">
                        <form @submit.prevent="validateForm">
                            <div class="text">
                                <table class="table">
                                    <tr>
                                        <td><a>用户名:</a></td>
                                        <td>
                                            <input type="text" v-model="username" class="input" placeholder="请输入您的用户名">
                                            <div v-if="errors.username" class="error">{{ errors.username }}</div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a>密 码:</a></td>
                                        <td>
                                            <input type="password" v-model="password" class="input" placeholder="请输入密码">
                                            <div v-if="errors.password" class="error">{{ errors.password }}</div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><a>验证码:</a></td>
                                        <td>
                                            <input type="text" v-model="verificationCode" class="input" placeholder="请输入验证码">
                                            <div v-if="errors.verificationCode" class="error">{{ errors.verificationCode }}</div>
                                        </td>
                                        <td>
                                            <div id="code" @click="createCode" class="pseudo-button">
                                                <span v-for="(char, index) in code" :key="index" :style="{ color: codeColors[index] }">{{ char }}</span>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                                <div class="forget">
                                    <li class="li1"><router-link to="/retrieve"><span>忘记密码？</span></router-link></li>
                                </div>
                                <input type="submit" value="登录" id="submit"  class="login" />
                                <input type="button" value="注册" id="reg "  class="register" @click="goToRegister" />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
  
    data() {
      return {
        username: '',
        password: '',
        verificationCode: '',
        code: '',
        errors: {},
        codeColors: [], // 存储每个字符的颜色
      };
    },
    methods: {
      createCode() {
        const codeLength = 4;
        const random = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'.split('');
        this.code = '';
        this.codeColors = []; // 重置颜色数组
        for (let i = 0; i < codeLength; i++) {
          const index = Math.floor(Math.random() * random.length);
          this.code += random[index];
          this.codeColors.push('#' + Math.floor(Math.random() * 16777215).toString(16)); // 生成随机颜色
        }
      },
      validateForm() {
        this.errors = {};
        if (!this.username) {
          this.errors.username = '该项未填写';
        }
        if (!this.password) {
          this.errors.password = '该项未填写';
        }
        if (!this.verificationCode) {
          this.errors.verificationCode = '该项未填写';
        }
        if (this.verificationCode !== this.code) {
          this.errors.verificationCode = '验证码错误';
          this.createCode();
          this.verificationCode = '';
          return;
        }
        if (Object.keys(this.errors).length === 0) {
            console.log(this.username);
            this.$http.post('/login', {
        username: this.username,
        password: this.password
      })
      .then(response=> {
        console.log(response);
        if(response.data == 'jHome.html'){
            // window.location.href = 'http://localhost:8080/';
            window.location.href = 'http://localhost:9528/';//改为支持人员主页
          
           
          }
          else if(response.data == 'zHome.html'){
            this.$router.push('/dashboard');
          }
          else if(response.data == '用户名或密码错误'){
            this.errors.verificationCode = '用户名或密码错误';
          }

      }).catch(error=> {
        // 处理错误情况
        console.log(error);
      });
           
          
        }
      },
      goToRegister() {
      // 使用路由跳转到/Register界面
      this.$router.push('/register');
      },
    },

    mounted() {
      this.createCode();
    }
  };
</script>
<style scoped>
    .background-image {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        position: fixed;
        top: 0;
        left: 0;
        background-color: #fff; /* 背景色，可根据需要调整 */
        z-index: 0; /* 背景层 */
    }

        .background-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("../../assets/Register_bg.jpg") center/cover no-repeat;
            z-index: -1; /* 确保伪元素在背景层之下 */
            filter: blur(8px);
        }

    .content {
        display: flex; /* 使.content成为flex容器 */
        justify-content: center; /* 水平居中main元素 */
        align-items: center; /* 垂直居中main元素 */
        height: 100%; /* 使.content的高度占满其父元素 */
        /* 如果需要，可以设置width: 100%来使.content宽度占满其父元素 */
    }

        .content .main {
            width: 1000px;
            height: 600px;
            background-color: #FFFFFF;
            border-radius: 10px;
        }

            .content .main .left {
                margin: 0;
                padding: 0;
                width: 55%;
                height: 100%;
                background-image: url("../../assets/Register_bg.jpg");
                background-size: cover;
                background-position: 65%;
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
                float: left;
            }

            .content .main .right {
                width: 45%;
                height: 100%;
                float: left;
            }

                .content .main .right .img {
                    margin-top: 30px;
                    width: 100%;
                    height: 10%;
                    float: left;
                }

                    .content .main .right .img img {
                        margin-left: 25px;
                        height: 100px;
                        width: 380px;
                        float: left;
                    }
    .choose {
        width: 100%;
        margin-top: 50px;
        margin-left: 30px;
        float: left;
    }

    .choose li {
        float: left;
        list-style: none;
        margin-right: 1px;
    }

    .choose .li2 a {
        display: block;
        text-decoration: none;
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 37px;
        background: deepskyblue;
        color: white;
        font-size: 20px;
        border-top-right-radius: 50px; /* 左上角的圆角大小 */
        border-bottom-right-radius: 50px; /* 左下角的圆角大小 */
    }

    .choose .li1 a {
        display: block;
        text-decoration: none;
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 37px;
        background: #dfdfdf;
        color: black;
        font-size: 20px;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
    }

        .choose .li1 a:hover {
            background: deepskyblue;
            color: white;
        }

    .con {
        float: left;
        margin-top: 30px;
        margin-left: 30px;
    }

    .table a {
        font-family: KaiTi;
        font-size: 25px;
        font-weight: bolder;
    }

    .input {
        width: 180px;
        padding: 10px;
        border: none;
        border-radius: 4px;
        box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.2);
        outline: none;
        color: dimgray;
    }

    .text .table {
        width: 400px;
        height: 200px;
        margin-top: 15px;
    }

    .forget li {
        margin-top: 10px;
        margin-left: 320px;
        float: left;
        color: grey;
        font-size: 16px;
        display: block;
    }

    .forget a {
        text-decoration: none; /* 去除下划线 */
        color: gray; /* 设置链接颜色，可以是任何你想要的颜色 */
    }

        .forget a:visited {
            color: gray; /* 访问过的链接颜色保持不变 */
        }


    .login {
        margin-top: 5%;
        /* padding: 8px 50px; */
        padding-left: 50px;
        padding-right: 30px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        float: left;
        margin-left: 5%;
        font-size: 25px;
        background-color: #00A2E8;
        color: #FFFFFF;
        border-radius: 10px;
        border: 1px;
        font-weight: bold;
        letter-spacing: 20px;
    }

        .login:hover {
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            background-color: #9ED3F0;
            color: black;
            font-weight: bolder;
        }

    .register {
        margin-top: 5%;
        /* padding: 8px 50px; */
        padding-left: 50px;
        padding-right: 30px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        float: left;
        margin-left: 5%;
        font-size: 25px;
        background-color: #00A2E8;
        color: #FFFFFF;
        border-radius: 10px;
        border: 1px;
        font-weight: bold;
        letter-spacing: 20px;
    }

        .register:hover {
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            background-color: #9ED3F0;
            color: black;
            font-weight: bolder;
        }

    .error {
        color: red;
        font-size: 12px;
        margin-top: 5px;
    }

    .pseudo-button {
        display: inline-block;
        padding: 6px 12px;
        border: 2px solid #dfdfdf;
        border-radius: 4px; /* 添加圆角边框 */
        background-color: #fff; /* 背景颜色 */
        cursor: pointer; /* 鼠标光标样式 */
        user-select: none; /* 防止文本被选中 */
        /* 以下是每个字符的样式 */
        font-style: italic;
    }

        .pseudo-button:hover {
            background-color: #f0f0f0; /* 鼠标悬停时的背景颜色 */
            border-color: #ccc; /* 鼠标悬停时的边框颜色 */
        }
</style>
